import { Button, Input, Radio, Space, Select, InputNumber } from "antd";
import { useState } from "react";
import CryptoJS from "crypto-js";
import { useEffect } from "react";

const { Option } = Select;

export default () => {
    const [text, setText] = useState("输入要哈希的文本");
    const [cipherText, setCipherText] = useState("");
    const [type, setType] = useState("sha1");
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [showPbkdf2, setShowPbkdf2] = useState(false);
    const [salt, setSalt] = useState("");
    const [count, setCount] = useState(1);
    const [key, setKey] = useState(128);

    useEffect(() => {
        type && encrypt();
    }, [type]);

    const encrypt = () => {
        try {
            let str = "";
            switch (type) {
                case "sha1":
                    str = CryptoJS.SHA1(text);
                    break;
                case "sha224":
                    str = CryptoJS.SHA224(text);
                    break;
                case "sha256":
                    str = CryptoJS.SHA256(text);
                    break;
                case "sha384":
                    str = CryptoJS.SHA384(text);
                    break;
                case "sha512":
                    str = CryptoJS.SHA512(text);
                    break;
                case "md5":
                    str = CryptoJS.MD5(text);
                    break;
                case "HmacSHA1":
                case "HmacSHA224":
                case "HmacSHA256":
                case "HmacSHA384":
                case "HmacSHA512":
                case "HmacMD5":
                    setShowPassword(true);
                    setShowPbkdf2(false);
                    break;
                case "PBKDF2":
                    setShowPassword(false);
                    setShowPbkdf2(true);
                    break;
            }
            setCipherText(str);
        } catch (error) {
            console.log(error);
        }
    };

    const sanliehaxi = () => {
        try {
            let str = "";
            switch (type) {
                case "HmacSHA1":
                    str = CryptoJS.HmacSHA1(text, password);
                    break;
                case "HmacSHA224":
                    str = CryptoJS.HmacSHA224(text, password);
                    break;
                case "HmacSHA256":
                    str = CryptoJS.HmacSHA256(text, password);
                    break;
                case "HmacSHA384":
                    str = CryptoJS.HmacSHA384(text, password);
                    break;
                case "HmacSHA512":
                    str = CryptoJS.HmacSHA512(text, password);
                    break;
                case "HmacMD5":
                    str = CryptoJS.HmacMD5(text, password);
                    break;
            }
            setCipherText(str);
        } catch (error) {
            console.log(error);
        }
    };

    const pbkdf2 = () => {
        if (count) {
            var newSalt = CryptoJS.enc.Utf8.parse(salt);
            var hash_str_pbkdf2 = CryptoJS.PBKDF2(text, newSalt, { keySize: parseInt(key), iterations: parseInt(count) });
            setCipherText(hash_str_pbkdf2);
        }
    };

    return (
        <div style={{ display: "flex", flexDirection: "column" }}>
            <div>
                明文：
                <Input.TextArea value={text} style={{ width: "100%", height: 100 }} onChange={(e) => setText(e.target.value)} />
            </div>
            <div style={{ margin: "20px 0" }}>
                <div>
                    散列/哈希算法：
                    <div>
                        <Radio.Group onChange={(e) => setType(e.target.value)} value={type} optionType="button" buttonStyle="solid">
                            <Radio value={"sha1"}>SHA1</Radio>
                            <Radio value={"sha224"}>SHA224</Radio>
                            <Radio value={"sha256"}>SHA256</Radio>
                            <Radio value={"sha384"}>SHA384</Radio>
                            <Radio value={"sha512"}>SHA512</Radio>
                            <Radio value={"md5"}>MD5</Radio>
                        </Radio.Group>
                    </div>
                    <div style={{ marginTop: 10 }}>
                        <Radio.Group onChange={(e) => setType(e.target.value)} value={type} optionType="button" buttonStyle="solid">
                            <Radio value={"HmacSHA1"}>HmacSHA1</Radio>
                            <Radio value={"HmacSHA224"}>HmacSHA224</Radio>
                            <Radio value={"HmacSHA256"}>HmacSHA256</Radio>
                            <Radio value={"HmacSHA384"}>HmacSHA384</Radio>
                            <Radio value={"HmacSHA512"}>HmacSHA512</Radio>
                            <Radio value={"HmacMD5"}>HmacMD5</Radio>
                            <Radio value={"PBKDF2"}>PBKDF2</Radio>
                        </Radio.Group>
                    </div>
                </div>
                {showPassword && (
                    <div style={{ marginTop: 10 }}>
                        <Input.Group compact>
                            <Input addonBefore="密钥" style={{ width: 500 }} onChange={(e) => setPassword(e.target.value)} />
                            <Button type="primary" onClick={sanliehaxi}>
                                哈希/散列
                            </Button>
                        </Input.Group>
                    </div>
                )}
                {showPbkdf2 && (
                    <Space style={{ marginTop: 10 }}>
                        <Input.Group compact>
                            <Button>KEY长度</Button>
                            <Select defaultValue="128" style={{ width: 100 }} onSelect={(value) => setKey(value)}>
                                <Option value={128}>128位</Option>
                                <Option value={256}>256位</Option>
                                <Option value={512}>512位</Option>
                            </Select>
                        </Input.Group>
                        <Input.Group compact>
                            <Input addonBefore="盐" style={{ width: 200 }} onChange={(e) => setSalt(e.target.value)} />
                        </Input.Group>
                        <Input.Group compact>
                            <InputNumber addonBefore="迭代次数" defaultValue={1} min={1} style={{ width: 150 }} onChange={(value) => setCount(value)} />
                        </Input.Group>
                        <Button type="primary" onClick={pbkdf2}>
                            哈希/散列
                        </Button>
                    </Space>
                )}
            </div>
            <div>
                哈希值：
                <Input.TextArea value={cipherText} style={{ width: "100%", height: 100 }} onChange={(e) => setCipherText(e.target.value)} />
            </div>
        </div>
    );
};
